<template>
  <div>
    <!-- 头部 -->
    <header-tab> <span slot="title">订单</span></header-tab>

    <van-tabs v-model="active" @click="onClick" animated>
      <van-tab title="全部订单" name="0">
        <order-details  v-show="this.$store.state.haveOrder" :order_status="order_status"></order-details>
        <van-empty
          v-show="!this.$store.state.haveOrder"
          class="custom-image"
          :image="require('../assets/img/empty3.png')"
          description="喵~暂时还没有订单"
        />
      </van-tab>

      <van-tab title="进行中" name="1">
        <order-details v-if="this.$store.state.haveOrder" :order_status="order_status"></order-details>
        <van-empty
          v-else
          class="custom-image"
          :image="require('../assets/img/empty3.png')"
          description="喵~暂时还没有订单"
        />
      </van-tab>
      <van-tab title="已完成" name="2">
        <order-details v-if="this.$store.state.haveOrder" :order_status="order_status"></order-details
        ><van-empty
          v-else
          class="custom-image"
          :image="require('../assets/img/empty3.png')"
          description="喵~暂时还没有订单"
      /></van-tab>
      <van-tab title="已取消" name="3">
        <order-details v-if="this.$store.state.haveOrder" :order_status="order_status"></order-details>
        <van-empty
          v-else
          class="custom-image"
          :image="require('../assets/img/empty3.png')"
          description="喵~暂时还没有订单"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HeaderTab from '@/components/HeaderTab.vue';
import OrderDetails from '../components/OrderDetails.vue';
import { mapState } from 'vuex';

export default {
  components: { HeaderTab, OrderDetails },
  ...mapState['haveOrder'],

  data() {
    return {
      active: '0',
      // orderAllNum: 1,
      order_status: null,
    };
  },
  methods: {
    onClick(name, title) {
      let _that = this;
      _that.order_status = name;
      // console.log(_that.order_status);
    },
  },
};
</script>

<style lang="scss">
.custom-image .van-empty__image {
  width: 10rem;
  height: 10rem;
}
.custom-image {
  padding-top: 15rem;
}
.van-tabs__line {
  background-color: #fde062;
}
.van-tab--active {
  color: #fde062;
  transition: 0.3s;
}
</style>
